<template>
    <!-- 页头 -->
    <el-page-header @back="goBack" style="margin-left: 20px;">
        <template #content>
            <span class="text-large font-600 mr-3"> 商品详情 </span>
        </template>
    </el-page-header>

    <!-- 商品主要内容卡片 -->
    <el-row style="background-color: white;width: 96%;margin-left: 20px;margin-top: 20px;padding: 20px;">
        <img :src="reccourselData.courseCover" style="width: 400px;" />
        <div style="margin-left: 30px;">
            <h3 style="font-weight: bold;">{{ reccourselData.courseName }}
                <el-button :type='buttonType' round class="collectbut" @click="collectec()">收藏
                </el-button>
            </h3>
            <p class="courseOPrice">{{ "￥" + reccourselData.courseOPrice }}</p>
            <p style="color: rgb(204, 0, 0);font-size: 24px;" v-if="reccourselData.courseCPrice == '免费'">{{
                reccourselData.courseCPrice }}</p>
            <p style="color: rgb(204, 0, 0);font-size: 24px;" v-else>{{ "￥" + reccourselData.courseCPrice }}</p>
            <el-button type="success" style="margin-top: 20px;"
                @click="leaApay(goodstate.buy, reccourselData.courseId, reccourselData.courseCPrice, reccourselData.courseType)">即刻学习</el-button>
        </div>
    </el-row>
</template>
<script>
import { ArrowLeft } from '@element-plus/icons-vue'
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import { useRoute, useRouter } from 'vue-router';


export default {
    setup() {
        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);
        const route = useRoute();
        const router = useRouter();
        const reccourselData = ref({});
        let goodstate = ref({});
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        console.log(goodstate);
        let buttonType = ref('info');


        console.log(userInfoJsonString);
        console.log(userInfo);

        function goBack() {
            router.push('/courseList')
        }

        const itemId = route.params.goodId

        //请求该用户与该课程的关系数据
        onMounted(async () => {
            try {
                axios.get('/goodState/findGStateByUIdGId', {
                    params: {
                        userId: userInfo.id,
                        goodId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {
                        // console.log(response.data);
                        goodstate.value = response.data;
                        // data.value = response.data.collect;
                        buttonType.value = response.data.collect === true ? 'success' : 'info';
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });
        //请求该课程的参数
        onMounted(async () => {
            try {
                axios.get('/course/findById', {
                    params: {
                        courseId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {
                        console.log(response.data);
                        if (response.data.courseCPrice == 0) {
                            response.data.courseCPrice = '免费'
                        }
                        reccourselData.value = response.data;
                        console.log(reccourselData.value.courseCPrice);
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });
        //收藏功能
        function collectec() {

            console.log(userInfoJsonString == "{}");
            if (userInfoJsonString == "{}") {
                ElMessage.error("请先登录一下下哦~~~");
                router.push("/login");
                return;
            }

            if (buttonType.value === 'info') {
                axios.get('/collect/collectCourse', {
                    params: {
                        userId: userInfo.id,
                        goodId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(respone => {
                    if (respone.code === 200) {
                        ElMessage.success("\(‵▽′)/收藏成功啦~");
                    } else {
                        ElMessage.error("x__x收藏失败啦~");
                    }
                })
            } else if (buttonType.value === 'success') {
                axios.get('/collect/noCollectCourse', {
                    params: {
                        userId: userInfo.id,
                        goodId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(respone => {
                    if (respone.code === 200) {
                        ElMessage.success("\(‵▽′)/取消收藏成功啦~");
                    } else {
                        ElMessage.error("x__x取消收藏失败啦~");
                    }
                })
            }
            buttonType.value = buttonType.value === 'info' ? 'success' : 'info';
        }
        function leaApay(isbuy, goodId, price, courseType) {

            console.log(userInfoJsonString == "{}");
            if (userInfoJsonString == "{}") {
                ElMessage.error("请先登录一下下哦~~~");
                router.push("/login");
                return;
            }
            else {
                if (price == '免费') {
                    router.push("/productVideo/" + goodId)
                    console.log("免费");
                } else if (isbuy == true) {
                    console.log(courseType);
                    if (courseType === "video") {
                        router.push("/productVideo/" + goodId)
                        console.log("支付了");
                    }else if(courseType === "book"){
                        router.push("/bookinfo/" + goodId)
                        console.log("支付了");
                    }

                } else {
                    console.log(courseType);
                    router.push("/payProduct/" + goodId)
                    console.log("没支付");
                }
            }
        }


        return {
            userInfoJsonString,
            leaApay,
            goodstate,
            userInfo,
            collectec,
            longtoken,
            token,
            reccourselData,
            itemId,
            route,
            router,
            goBack,
            buttonType,
        }

    }

}

</script>
<style>
.courseOPrice {
    font-size: 16px;
    margin-top: 80px;
    text-decoration: line-through;
}

.collectbut {
    width: 60px;
    margin-bottom: 5px;
    margin-left: 10px;
}
</style>